<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>6-2</title>
    <style>
        .fontcontent {
            width: 800px;
            margin-left: 200px;
        }
    </style>
</head>

<body>
    <input type="password" style="float: left" id="input">
    <div class="fontcontent"></div>

    <script>
        var input = document.querySelector('#input');
        input.onblur = function() {
            if (this.value.length < 6 || this.value.length > 16) { //value拼错，input。value和div.innerHTML的区别
                var div = document.querySelector('.fontcontent');
                div.innerHTML = '输入的位数不对，6——16位';
                div.style.color = 'red';
            } else {
                var div = document.querySelector('.fontcontent');
                div.innerHTML = '输入正确';
                div.style.color = 'black';

            }
        }
    </script>
</body>


</html>